<template>
    <div class="user_wapper">
        <el-row>
            <el-col :span="24">
                <el-card shadow="always">
                    <el-table :data="tableData" border="" style="width: 100%">
                        <el-table-column prop="id" label="权限ID"></el-table-column>
                        <el-table-column prop="authName" label="权限说明"></el-table-column>
                        <el-table-column prop="path" label="对应访问路径"></el-table-column>
                        <el-table-column prop="level" label="权限层级">
                            <template slot-scope="row">
                                <div v-if="row.row.level==0">
                                    <el-tag effect="plain">一级</el-tag>
                                </div>
                                <div v-if="row.row.level==1">
                                    <el-tag type="success" effect="plain">二级</el-tag>
                                </div>
                                <div v-if="row.row.level==2">
                                    <el-tag type="info" effect="plain">三级</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
  created() {
    this.users();
  },
  mounted() {},
  data() {
    return {
      tableData: []
    };
  },
  // 方法
  methods: {
    users() {
      this.$http
        .userrights({})
        .then(res => {
          if (res.meta.status == 200) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    onchange(row) {
      this.$http
        .usersState(row.row.id, row.row.mg_state, {})
        .then(res => {
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            this.users();
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    // 点击了删除
    ondel(row) {
      this.$confirm("确定删除管理员吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .usersdelete(row.row.id, {})
            .then(res => {
              if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.users();
              } else {
                this.$message.error(res.meta.msg);
              }
            })
            .catch(res => {
              console.log(res);

              this.$message.error("网络错误");
            });
        })
        .catch(() => {});
    },
    onclear() {
      this.users();
    },
    handleSizeChange(e) {
      this.Query.pagesize = e;
      this.users();
    },
    handleCurrentChange(e) {
      this.Query.pagenum = e;
      this.users();
    }
  },
  //计算属性
  computed: {},
  // 监听属性
  watch: {},
  // 组件注册
  components: {},
  // 组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="less" scoped>
.user_wapper {
  height: 100%;
  width: 100%;
 
}
</style>